<!--
 * @Author: xinqiao lxq1990.0716@qq.com
 * @Date: 2023-12-05 10:07:01
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2024-02-18 16:13:20
 * @FilePath: \components\src\views\preview\index.vue
 * @Description: 手机预览
-->

<template>
  <div class="preview" :class="isPc ? 'pc' : 'mobile'">
    <div class="title">{{ pkg.title.split(' ')[1] }}</div>
    <div class="content">
      <div v-for="(demo, index) of demos" :id="`demo-${demo.name}`" :key="demo.name" class="content-item">
        <div class="content-item-title">{{ demo.title || `Demo${index + 1}` }}</div>
        <component :is="demo.name" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { computed, ref, onMounted } from 'vue'
  import { useRoute } from 'vue-router'
  import packages from '@/service/packages'
  import { checkPc } from '@/utils/util'

  const route = useRoute()

  const packageName = computed(() => route.params.name as string)

  const pkg = computed(() => packages[packageName.value])

  const demos = computed(() => pkg.value.demos)

  const isPc = ref(checkPc())

  onMounted(() => document.title = pkg.value.title)
</script>

<style lang="less" scoped>
  .preview {
    width: 100%;
    height: 100vh;
    &.pc {
      padding-top: 96px;
    }
    &.mobile {
      padding-top: 0;
      > .title {
        display: none;
      }
    }
  }

  .title {
    position: absolute;
    top: 55px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
  }

  .content {
    height: 100%;
    padding-bottom: 24px;
    overflow: auto;
    background: #f4f4f4;

    > .content-item {
      padding-top: 12px;

      > .content-item-title {
        padding: 0 12px;
        font-size: 14px;
        margin-bottom: 6px;
      }
    }
  }
</style>

<style lang="less">
  ::-webkit-scrollbar {
    width: 1px;
  }
</style>
